<template>
  <div>
    <header-top title="学生成绩分析" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div class="content clearfix">
      <teacher-class @data = 'getList' />
      <table class="Table">
        <thead>
          <tr>
            <th width="30%">姓名</th>
            <th width="40%">班级</th>
            <th width="30%">操作</th>
          </tr>
          <tr v-for="item of studentList" :key="item.id">
            <td>{{item.fullName}}</td>
            <td>{{item.gradeName + item.className}}</td>
            <td @click = "Analyze(item.id,item.fullName)">成绩分析</td>
          </tr>
        </thead>
      </table>

    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import {reqStudent} from "@/api";

  export default {
    name: "studentAnalyze",

    data(){
      return {
        studentList:null,
        params:{
          studentId:null,
          gradeId:null,
          studentName:null,
        }

      }
    },
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    mounted() {
      let classId = this.$store.state.teacherClass[0].id
      let gradeId = this.$store.state.teacherClass[0].gradeId
      let data = {classId:classId,gradeId:gradeId}
      this.getList(data)
    },
    methods:{
      async getList(data){
        this.params.gradeId =data.gradeId
        //根据班级ID获取学生
        let students = await reqStudent(data.classId)
        this.studentList = students.data
      },
      Analyze(studentId,studentName){
        this.params.studentId = studentId
        this.params.studentName = studentName
        this.$router.replace({path:'/class/exam/studentAnalyze/detail',query:this.params})
      }

    }
  }
</script>

<style scoped>
  .Table{ font-size: 1.1rem; line-height: 2.8rem;}
  .Table th{ color: #00c08c;}
</style>
